<script lang="js" setup>
import { ref } from "vue"
import { register } from 'swiper/element/bundle';
import { useRouter } from "vue-router";
register();
const Router = useRouter()
// 点击书籍进入详情页
const goDetail = () => {
    Router.push({
        path: '/detail'
    })
}
</script>

<template>
    <div>
        <swiper-container :slides-per-view="3"  :centered-slides="true" :pagination="{
            hideOnClick: true
        }" :breakpoints="{
    768: {
        slidesPerView: 1,
    },
}">
            <swiper-slide @click="goDetail"><img src="/swiper1.jpeg" alt="" class="swiper"></swiper-slide>
            <swiper-slide @click="goDetail"><img src="/swiper2.jpeg" alt="" class="swiper"></swiper-slide>
            <swiper-slide @click="goDetail"><img src="/swiper3.jpeg" alt="" class="swiper"></swiper-slide>
        </swiper-container>
    </div>
</template>

<style lang="scss" scoped>
    .swiper {
        width: 100%;
        height: 400px;
    }

</style>